// ignore_for_file: file_names

import 'dart:math';

import 'package:flutter/material.dart';

class MyApp13 extends StatelessWidget {
  const MyApp13(
      {super.key,
      this.title = '',
      this.content = '',
      this.textCol = Colors.black,
      this.textSize = 0});

  final String title;
  final String content;
  final Color textCol;
  final double textSize;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.orange,
          toolbarHeight: 100,
          title: Center(
            child: Text(
              '$title ',
              style: const TextStyle(color: Colors.white, fontSize: 50),
            ),
          ),
        ),
        body: const MyContainer(),
      ),
    );
  }
}

Color getRandomColor() {
  Random random = Random();
  return Color.fromRGBO(
      random.nextInt(256), random.nextInt(256), random.nextInt(256), 1.0);
}

class MyContainer extends StatelessWidget {
  const MyContainer({super.key});

  @override
  Widget build(BuildContext context) {
    List navList = [
      {
        "imgUrl":
            "https://smart-shop.itheima.net/uploads/10001/20230320/58a7c1f62df4cb1eb47fe83ff0e566e6.png",
        "imgName": "icon-1.png",
        "link": {
          "id": "c37c2ee",
          "title": "分类页",
          "type": "PAGE",
          "param": {
            "path": "pages/category/index",
            "url": "pages/category/index"
          }
        },
        "text": "新品首发"
      },
      {
        "imgUrl":
            "https://smart-shop.itheima.net/uploads/10001/20230320/49c64dbbf449e9e8abfca314f92814bd.png",
        "imgName": "icon-2.jpg",
        "link": {
          "id": "c37c2ee",
          "title": "分类页",
          "type": "PAGE",
          "param": {
            "path": "pages/category/index",
            "url": "pages/category/index"
          }
        },
        "text": "居家生活"
      },
      {
        "imgUrl":
            "https://smart-shop.itheima.net/uploads/10001/20230320/8573fbc5e87e8a88827e905fca284604.png",
        "imgName": "icon-1.png",
        "link": null,
        "text": "服饰鞋包"
      },
      {
        "imgUrl":
            "https://smart-shop.itheima.net/uploads/10001/20230320/f01c5fc360f55c6053beec34913bc699.png",
        "imgName": "icon-1.png",
        "link": null,
        "text": "美食酒水"
      },
      {
        "imgUrl":
            "https://smart-shop.itheima.net/uploads/10001/20230320/b106e9bd9e0c8c779e7d77a84e92ed93.png",
        "imgName": "icon-1.png",
        "link": null,
        "text": "个护清洁"
      },
      {
        "imgUrl":
            "https://smart-shop.itheima.net/uploads/10001/20230320/fd3a573889671b924d89859f521c30c9.png",
        "imgName": "icon-1.png",
        "link": null,
        "text": "母婴亲子"
      },
      {
        "imgUrl":
            "https://smart-shop.itheima.net/uploads/10001/20230320/8f979924a4fd3b5f406b62a6b405ea32.png",
        "imgName": "icon-1.png",
        "link": null,
        "text": "运动旅行"
      },
      {
        "imgUrl":
            "https://smart-shop.itheima.net/uploads/10001/20230320/f7657720f79ea9f769c40608f369130e.png",
        "imgName": "icon-1.png",
        "link": null,
        "text": "数码家电"
      },
      {
        "imgUrl":
            "https://smart-shop.itheima.net/uploads/10001/20230320/36f09e32efc53e1e695210ca92c54ed8.png",
        "imgName": "icon-1.png",
        "link": null,
        "text": "宠物生活"
      },
      {
        "imgUrl":
            "https://smart-shop.itheima.net/uploads/10001/20230320/0cccdb31952fbf3bc0026efbe260e40e.png",
        "imgName": "icon-1.png",
        "link": null,
        "text": "每日抄底"
      }
    ];
    return GridView.builder(
      // SliverGridDelegateWithFixedCrossAxisCount
      gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
        // 主轴间隙 上往下
        mainAxisSpacing: 10,
        // 交叉轴间隙 左往右
        crossAxisSpacing: 5,
        // 宽高比
        childAspectRatio: 6 / 3,
        maxCrossAxisExtent: 300,
        // 交叉轴元素个数
        // crossAxisCount: 3),
      ),
      itemCount: navList.length,
      itemBuilder: (BuildContext context, int index) {
        return Container(
          height: 100,
          color: getRandomColor(),
          alignment: Alignment.center,
          // child: Text('黑马程序员 ${index + 1}'),
          child: Row(
            children: [
              Image.network(
                navList[index]['imgUrl'],
                width: 150,
              ),
              Text(navList[index]['text'])
            ],
          ),
        );
      },
    );
  }
}

// 自适应 自动换行
class MyContainer_second extends StatelessWidget {
  const MyContainer_second({super.key});

  @override
  Widget build(BuildContext context) {
    return GridView(
      gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
        // crossAxisCount: 3, // 1.1 设置侧轴方向子元素个数，此时每行展示的子元素个数是固定的
        mainAxisSpacing: 10.0, // 1.2 主轴(垂直)方向子元素间距
        crossAxisSpacing: 10.0, // 1.3 侧轴(水平)方向子元素间距
        childAspectRatio: 16 / 9, // 1.4 子元素宽高比，默认宽高相同 1: 1
        maxCrossAxisExtent: 300, // 1.5 侧轴方向最大长度
        // mainAxisExtent: 50, // 主轴元素高度
      ),
      children: [
        // 子项们
        Container(
          color: Colors.red,
        ),
        Container(
          color: Colors.yellow,
        ),
        Container(
          color: Colors.green,
        ),
        Container(
          color: Colors.orange,
        ),
        Container(
          color: Colors.blueAccent,
        ),
        Container(
          color: Colors.greenAccent,
        ),
        Container(
          color: Colors.purple,
        ),
        Container(
          color: Colors.pink,
        ),
        Container(
          color: Colors.yellowAccent,
        ),
      ],
    );
  }
}

class MyContainer_normal extends StatelessWidget {
  const MyContainer_normal({super.key});

  @override
  Widget build(BuildContext context) {
    return GridView(
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3, // 1.1 设置侧轴方向子元素个数，此时每行展示的子元素个数是固定的
        mainAxisSpacing: 10.0, // 1.2 主轴(垂直)方向子元素间距
        crossAxisSpacing: 10.0, // 1.3 侧轴(水平)方向子元素间距
        childAspectRatio: 2 / 2, // 1.4 子元素宽高比，默认宽高相同 1: 1
        // mainAxisExtent: 50, // 主轴元素高度
      ),
      children: [
        // 子项们
        Container(
          color: Colors.red,
        ),
        Container(
          color: Colors.yellow,
        ),
        Container(
          color: Colors.green,
        ),
        Container(
          color: Colors.orange,
        ),
        Container(
          color: const Color.fromARGB(255, 22, 144, 243),
        ),
        Container(
          color: Colors.greenAccent,
        ),
        Container(
          color: Colors.purple,
        ),
        Container(
          color: Colors.pink,
        ),
        Container(
          color: Colors.yellowAccent,
        ),
      ],
    );
  }
}
